<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<body>
		<div th:fragment="content">
			<ul data-theme="d" data-role="listview" data-inset="true" data-divider-theme="b">
				<li th:text="#{wireless.node.remote.node(${rn.address})}" data-role="list-divider">Remote Node: (prototype)</li>
				<li th:each="rni : ${remoteNodes}">
					<a th:href="@{${url}(id=${rni.id})}" href="/index.html" data-transition="flip" disabled="true">
						<span th:text="${rni.address}">0000 (prototype)</span>
					</a>
					<a th:text="#{wireless.node.connect(${rni.address})}" href="#" th:id="'id' + ${rniStat.index}"
						th:attr="onclick=${'rnConnect(this.id,\'' + rni.id + '\', \'Connecting...\')'}" 
						data-theme="b" data-icon="info">Connect To Remote Device (prototype)</a>
				</li>
			</ul>
			<div th:unless="${#strings.isEmpty(rn.address)}" id="rnDetail">
				<form th:action="@{/}" id="rnCommandForm" action="/index.html" method="post" data-theme="c" data-transition="flip" class="updateable">
					<input id="command" name="command" type="hidden" value="" />
					<input id="commandData" name="commandData" type="hidden" value="" />
					<input th:value="${rn.id}" name="id" type="hidden" value="" />
				</form>
				<form th:action="@{/}" id="rnrForm" action="/index.html" method="post">
					<div data-role="collapsible-set" data-transition="slidefade">
						<div data-role="collapsible" data-theme="b" data-content-theme="c">
							<h3 th:text="#{sensors.readings.last}">Last Captured Reading (prototype)</h3>
							<a th:text="#{sensors.readings.get}" th:attr="onclick=${'exeCommand(\'SENSOR_GET_READINGS\')'}" 
								href="#" id="rnrRefreshBtn" data-theme="b" data-icon="info">Request Readings From Remote Device (prototype)</a>
							<div th:each="vt : ${RemoteNodeReadingType}" data-role="fieldcontain">
								<div th:text="#{${vt.type.key}}" th:for="${vt.type.key}">Label (prototype)</div>
								<label>
									<select th:if="${vt.type.group.name == 'TOGGLE'}" th:name="${vt.type.key}" data-role="slider"
										th:attr="onchange=${'exeCommand(\'' + vt.type.command.name + '\', \'rnrForm\', this.name)'}">
										<option th:text="#{off}" th:selected="${vt.value} == 0" value="0">Closed</option>
										<option th:text="#{on}" th:selected="${vt.value} == 1" value="1">Opened</option>
									</select>
									<input th:if="${vt.type.group.name == 'INPUT'}" th:name="${vt.type.key}" th:value="${vt.value}" 
										type="number" readonly="readonly" />
									<a th:if="${vt.type.command and vt.type.group.name == 'INPUT'}" th:title="#{wireless.web.command.execute(${vt.type.command.key})}" 
										th:attr="onclick=${'exeCommand(\'' + vt.type.command.name + '\', \'rnrForm\', \'' + vt.type.key + '\')'}"
										title="Command Button (prototype)" href="#" data-mini="true" data-inline="true" data-role="button" 
										data-theme="a" data-icon="gear" data-iconpos="notext">
									</a>
								</label>
							</div>
						</div>
					</div>
					<input th:value="${rn.id}" name="id" type="hidden" value="" />
					<input th:value="${rnr.id}" name="remoteNodeReadings" type="hidden" value="" />
				</form>
				<form th:action="@{/}" id="settingsForm" action="/index.html" method="post" data-theme="c" data-transition="flip" class="updateable">
					<div data-role="collapsible-set">
						<div data-role="collapsible" data-theme="b" data-content-theme="c">
							<h3 th:text="#{alarm.settings}">General Settings (prototype)</h3>
							<div data-role="collapsible-set">
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{sensors.trip.multi}">Alarm Multi-Trip State (prototype)</h3>
									<div th:each="cp : ${ALARM_TRIP_STATE_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="mats">Alarm Multi-Trip State Binary (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="mats" id="mats" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{universal.remote}">Universal Remote (prototype)</h3>
									<div th:each="cp : ${UNIVERSAL_REMOTE_TOGGLE}" class="containing-element">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="urt">Universal Remote On/Off (prototype)</label>
										<select th:name="${cp.type.key}" th:id="${cp.type.key}" name="urt" id="urt" data-role="slider">
											<option th:text="#{off}" th:selected="${cp.value} == 0" value="0">Off</option>
											<option th:text="#{on}" th:selected="${cp.value} == 1" value="1">On</option>
										</select>
									</div>
									<div th:each="cp : ${UNIVERSAL_REMOTE_CODE_RANGE}" data-role="fieldcontain">
										<label th:text="#{wireless.access.key(${cpStat.index})}" th:for="${cp.type.key}" for="urkc">Universal Remote Key Code (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="urkc" id="urkc" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{alarm.notify}">Alarm Notifications (prototype)</h3>
									<div th:each="cp : ${ALARM_NOTIFY_TOGGLE}" class="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="ant">Alarm Notification On/Off (prototype)</label>
										<select th:name="${cp.type.key}" th:id="${cp.type.key}" name="ant" id="ant" data-role="slider">
											<option th:text="#{off}" th:selected="${cp.value} == 0" value="0">Off</option>
											<option th:text="#{on}" th:selected="${cp.value} == 1" value="1">On</option>
										</select>
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{cam}">Camera Settings (prototype)</h3>
									<div th:each="cp : ${CAM_SETTINGS_TOGGLE}" class="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="camSet">Camera Settings On/Off (prototype)</label>
										<select th:name="${cp.type.key}" th:id="${cp.type.key}" name="camSet" id="camSet" data-role="slider">
											<option th:text="#{camResolution.qvga}" th:selected="${cp.value} == 0" value="0">QVGA</option>
											<option th:text="#{camResolution.vga}" th:selected="${cp.value} == 1" value="1">VGA</option>
										</select>
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{gate.conf}">Gate Configuration (prototype)</h3>
									<div th:each="cp : ${GATE_TOGGLE}" class="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="ant">Gate On/Off (prototype)</label>
										<select th:name="${cp.type.key}" th:id="${cp.type.key}" name="ant" id="ant" data-role="slider">
											<option th:text="#{off}" th:selected="${cp.value} == 0" value="0">Off</option>
											<option th:text="#{on}" th:selected="${cp.value} == 1" value="1">On</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<div data-role="collapsible" data-theme="b" data-content-theme="c">
							<h3 th:text="#{alarm.thres}">Alarm Thresholds (prototype)</h3>
							<div data-role="collapsible-set">
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{sonar}">Sonar (prototype)</h3>
									<div th:each="cp : ${SONAR_THRESHOLD_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="sThres">Sonar Threshold Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="sThres" id="sThres" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{pir}">PIR (prototype)</h3>
									<div th:each="cp : ${PIR_THRESHOLD_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="pThres">PIR Threshold Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="pThres" id="pThres" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{mw}">Microwave (prototype)</h3>
									<div th:each="cp : ${MW_THRESHOLD_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="mThres">Microwave Threshold Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="mThres" id="mThres" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{laser}">Laser (prototype)</h3>
									<div th:each="cp : ${LASER_THRESHOLD_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="lThres">Laser Threshold Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="lThres" id="lThres" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
							</div>
						</div>
						<div data-role="collapsible" data-theme="b" data-content-theme="c">
							<h3 th:text="#{alarm.positioning}">Positioning (prototype)</h3>
							<div data-role="collapsible-set">
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{cam.pos}">Camera Positiong (prototype)</h3>
									<div th:each="cp : ${CAM_POSITION_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="camPos">Camera Position Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="camPos" id="camPos" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{sonar.pir.pos}">Sonar/PIR Positiong (prototype)</h3>
									<div th:each="cp : ${SONAR_PIR_POSITION_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="spPos">Sonar/PIR Position Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="spPos" id="spPos" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
								<div data-role="collapsible" data-theme="c" data-content-theme="c">
									<h3 th:text="#{mw.pos}">Microwave Positiong (prototype)</h3>
									<div th:each="cp : ${MW_POSITION_RANGE}" data-role="fieldcontain">
										<label th:text="#{${cp.type.key}}" th:for="${cp.type.key}" for="mwPos">Microwave Range (prototype)</label>
										<input th:value="${cp.value}" th:max="${cp.type.max}" th:min="${cp.type.min}" 
											type="range" th:name="${cp.type.key}" th:id="${cp.type.key}" name="mwPos" id="mwPos" 
											value="0" min="0" max="100" data-highlight="true" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<input th:value="${rn.id}" name="id" type="hidden" value="" />
				</form>
			</div>
		</div>
	</body>
</html>